import React from 'react';
import {
    AppRegistry,
    View,
    Text,
    Button,
    StyleSheet,
} from 'react-native';
//导航器
//npm install -save react-navigation
import {
    StackNavigator,
    TabNavigator,
    NavigationActions,
} from 'react-navigation';
import MyComponentScreen from './js/screen/MyComponentScreen';
import ES6TestScreen from './js/screen/ES6TestScreen';
//step2:我们可以在主屏幕组件上添加一个按钮，该组件使用routeName聊天连接到ChatScreen。
class HomeScreen extends React.Component {
    static  navigationOptions = {
        title: 'Welcome',
    };

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <Text> Hello,Navigation!</Text>
                <Button
                    // onPress={()=>navigate('Chat')}
                    onPress={() => navigate('Chat', {user: 'Jillian'})}
                    title="点击跳转到聊天页面"
                />
            </View>

        );
    }
}

//step1：创建一个屏幕
class ChatScreen extends React.Component {
    // static navigationOptions={
    //     title:'第二个标题',
    // };
    // static navigationOptions = ({ navigation }) => ({
    //     // title:`Chat With ${navigation.state.params.user}`,
    //     title:`和${navigation.state.params.user}聊天`,
    //     headerRight:<Button title="分享"/>,
    // });
    static navigationOptions = ({navigation}) => {
        const {state, setParams} = navigation;
        const isInfo = state.params.mode === 'info';//mode是否等于info
        const {user} = state.params;
        return {
            title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
            // 如果isInfo =true 返回`${user}'s Contact Info`否则返回Chat with ${state.params.user}
            headerRight: (
                <Button
                    title={isInfo ? 'Done' : `${user}'s info`}
                    onPress={() => setParams({mode: isInfo ? 'none' : 'info'})}
                    //点击后设置mode的值
                />
            ),
        };
    };

    render() {
        const {params} = this.props.navigation.state;
        return (
            <View>
                <Text> 正在与{params.user}聊天中</Text>
            </View>
        );
    }
}


class RecentChatsScreen extends React.Component {

    render() {
        return (
            <View>
                <Text
                >
                    测试
                </Text>
                <Button
                     onPress={() => this.props.navigation.navigate('Chat', {user: 'Bob'})}
                    title="和Bob聊天"
                    color='#841584'
                />
                <Button
                    onPress={() => this.props.navigation.navigate('MyComponent')}
                    title="Component学习"/>
                <Button
                    onPress={() => this.props.navigation.navigate('ES6Test')}
                    title="es6学习"
                    color='#841584'
                />
            </View>
        );
    }

}

const styles = StyleSheet.create({
    button_style: {
        color: 'red',
        margin: 10,
    },
});

class AllContactsScreen extends React.Component {
    render() {
        return (
            <View>
                <Text>
                    所有联系人列表
                </Text>
            </View>

        );
    }
}

const MainScreenNavigator = TabNavigator({
    Recent: {screen: RecentChatsScreen},
    All: {screen: AllContactsScreen},
});
//定义的ChatScreen需要在这部分代码的前面
//step3：添加到StackNavigator

const SimpleApp = StackNavigator({
    Root: {screen: MainScreenNavigator},
    Home: {screen: HomeScreen},
    Chat: {screen: ChatScreen},
    MyComponent: {screen: MyComponentScreen},
    ES6Test:{screen:ES6TestScreen},
}, {
    initialRouteName: 'Root',
    mode: 'card',
    headerMode: 'screen',
});

MainScreenNavigator.navigationOptions = {
    title: '我的联系人',
};
AppRegistry.registerComponent('Test2', () => SimpleApp);

